<template>
  <div class="table-cover">
    <el-table
      :data="branchList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="100">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="300"
      >
      </el-table-column>
      <el-table-column
        prop="last"
        label="Stock"
      ></el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="total"
        @current-change="changepagetotal"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "GDFunctionSuMaterialBranch",
    props: ["id", "index"],
    methods: {
      handleClick(e) {

      },
      changepagetotal(page) {
        this.$store.commit('setBranchList', this.api.getBranchStore(this.id - 1, page - 1));
      }
    },
    watch: {},
    mounted() {

    },
    computed: {
      branchList() {
        return this.$store.state.branchList;
      },
      total() {
        return this.api.branchStore[this.id - 1].length - 1
      }
    }
  }
</script>

<style scoped>
  .block {
    margin-left: calc(50%);
    margin-top: 20px;
    transform: translateX(-50%);
  }

  .table-cover {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 4px;
    width: calc(100% - 20px);
  }
</style>
